<template>

    <vue-table :data-source="tableList" :search-config="searchConfig" @open-complex="openComplex"
               @on-query="changeQuery">
        <template slot="search" slot-scope="props">
            <i-form :label-width="80">
                <Row>
                    <i-col span="24">
                        <Form-item label="案件来源">
                            <i-input v-model="props.items.name" placeholder="请输入案件来源"></i-input>
                        </Form-item>
                    </i-col>
                </Row>
            </i-form>
        </template>
        <template slot="header">
            <tr>
                <th>案件来源</th>
                <th>调解日期</th>
                <th>操作</th>
            </tr>
        </template>
        <template slot="tbody" slot-scope="props">
            <tr>
                <td>{{props.item.case_source}}</td>
                <td>{{props.item.case_time}}</td>
                <td>
                    <Tooltip content="编辑案件信息"  placement="top">
                        <i-button type="text" v-on:click="$router.push({name:'case_create',params:{caseId:props.item.id,step:1}})"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="ios-list" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="编辑调查记录"  placement="top">
                        <i-button type="text" v-on:click="$router.push({name:'case_create',params:{caseId:props.item.id,step:2}})"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="ios-bookmarks" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="编辑调查协议"  placement="top">
                        <i-button type="text" v-on:click="$router.push({name:'case_create',params:{caseId:props.item.id,step:3}})"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="ios-pricetags" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="编辑回访记录"  placement="top">
                        <i-button type="text" v-on:click="$router.push({name:'case_create',params:{caseId:props.item.id,step:4}})"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="ios-paper" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="删除"  placement="top">
                        <i-button type="text" v-on:click="deleteModel(props.item.id, props.item.case_source)"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="trash-a" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                </td>
            </tr>
        </template>

    </vue-table>

</template>

<script>
  import { mapState } from 'vuex';
  import selectData from '../../libs/getDataForSelect';
  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data: function () {
      return {
        list: this.$listDataSource({
          url: '/api/case'
        }),
        searchConfig: {
          items: {
            name: '',
          },
          complex: false,
          status: true
        },
        openComplexStatus: false,
        model: this.$modelDataSource({
          url: '/api/case',
          dataKey: 'model',
          attributes: {
            id: 0,
            name: '',
          }
        }),
        query: {}
      };
    },
    methods: {
      openComplex: function (openStatus) {
        this.openComplexStatus = openStatus;
      },
      changeQuery: function (query) {
        this.query = query;
        this.stateManager.refreshList = true;
      },
      showEditDialog: function (id) {
        this.stateManager.editModelId = id;
        this.stateManager.buttonLoading = true;
      },
      deleteModel: function (modelId, modelName) {
        let self = this;
        this.$Modal.confirm({
          title: '删除确认',
          content: '确认删除' + modelName + '吗？',
          loading: true,
          onOk: function () {
            self.model.reset();
            self.model.uuid = modelId;
            self.model.destroy(function () {
              self.$Modal.remove();
              self.stateManager.refreshList = true;
              self.$Notice.success({
                title: '删除成功',
                desc: modelName + '已删除'
              })
            });
          },
          onCancel: function () {
            console.log('取消删除');
          }
        });
      }
    },
    computed: {
      ...mapState({
        user: 'user',
      }),
    tableList(){
      let self = this;
      if (this.stateManager.refreshList) {
        this.list.fetch(self.query, function () {
          self.stateManager.refreshList = false;
        });
      }
      return this.list;
    }
  }
  }
</script>
